<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'

// 获取路由
const router = useRouter()

// 保存卡片的引用
const featureCards = ref([])

// 3D翻转效果
const initCardEffects = async () => {
  // 等待DOM更新完成
  await nextTick()

  // 处理卡片3D翻转效果
  featureCards.value.forEach((card) => {
    if (!card) return

    const handleMouseMove = (e) => {
      const rect = card.getBoundingClientRect()
      const x = e.clientX - rect.left
      const y = e.clientY - rect.top
      const centerX = rect.width / 2
      const centerY = rect.height / 2

      const rotateX = (y - centerY) / 10
      const rotateY = (centerX - x) / 10

      card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`
    }

    const handleMouseLeave = () => {
      card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)'
    }

    card.addEventListener('mousemove', handleMouseMove)
    card.addEventListener('mouseleave', handleMouseLeave)
  })
}

onMounted(() => {
  initCardEffects()
})

const features = ref([
  {
    id: 1,
    title: '360°沉浸式体验',
    description:
      '全方位沉浸式VR体验，无论您转向哪里，都能看到精心设计的游戏世界。我们采用最先进的追踪技术，确保您的每一个动作都能被精确捕捉。',
    image: 'https://images.pexels.com/photos/3945656/pexels-photo-3945656.jpeg',
    icon: 'View',
  },
  {
    id: 2,
    title: '多人互动游戏',
    description:
      '与来自世界各地的玩家一起体验VR冒险。我们的多人模式支持实时语音交流和互动，让您和朋友们共同探索虚拟世界。',
    image: 'https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg',
    icon: 'User',
  },
  {
    id: 3,
    title: '高级物理引擎',
    description:
      '游戏采用最新的物理引擎，每一个物体的移动和碰撞都遵循真实世界的物理规律，提供更真实的游戏体验。',
    image: 'https://images.pexels.com/photos/256369/pexels-photo-256369.jpeg',
    icon: 'DataAnalysis',
  },
  {
    id: 4,
    title: '智能AI系统',
    description:
      '游戏中的NPC由先进的AI系统驱动，能够根据玩家的行为动态调整，提供更有挑战性和沉浸感的游戏体验。',
    image: 'https://images.pexels.com/photos/1181675/pexels-photo-1181675.jpeg',
    icon: 'SetUp',
  },
  {
    id: 5,
    title: '多平台支持',
    description:
      '支持所有主流VR平台，包括Oculus Quest、HTC Vive、Valve Index等，让每一位VR玩家都能体验我们的游戏。',
    image: 'https://images.pexels.com/photos/3945655/pexels-photo-3945655.jpeg',
    icon: 'Monitor',
  },
  {
    id: 6,
    title: '定期内容更新',
    description:
      '我们的开发团队致力于提供定期更新，包括新地图、新任务、新装备等，让游戏内容保持新鲜感。',
    image: 'https://images.pexels.com/photos/5864150/pexels-photo-5864150.jpeg',
    icon: 'Refresh',
  },
])

// 按钮点击事件
const handleTryNow = () => {
  router.push('/download')
}

const handleMoreTechDetails = () => {
  router.push('/about')
}
</script>

<template>
  <div class="features">
    <div class="features-hero">
      <div class="cyber-grid"></div>
      <div class="hero-content">
        <h1 class="vr-mega-title animate__animated animate__fadeIn" data-text="游戏特性">
          游戏<span class="highlight">特性</span>
          <span class="glitch-layer">游戏特性</span>
          <span class="glitch-layer">游戏特性</span>
          <div class="digital-noise"></div>
        </h1>
        <p class="cyber-subtitle animate__animated animate__fadeIn animation-delay-1">
          探索我们VR游戏的革命性功能与技术
        </p>
      </div>
      <div class="particle-container">
        <div
          class="vr-particle blue"
          style="left: 10%; top: 20%; width: 5px; height: 5px; animation-duration: 15s"
        ></div>
        <div
          class="vr-particle purple"
          style="left: 30%; top: 30%; width: 6px; height: 6px; animation-duration: 12s"
        ></div>
        <div
          class="vr-particle blue"
          style="left: 70%; top: 15%; width: 4px; height: 4px; animation-duration: 20s"
        ></div>
        <div
          class="vr-particle pink"
          style="left: 80%; top: 25%; width: 5px; height: 5px; animation-duration: 18s"
        ></div>
        <div
          class="vr-particle blue"
          style="left: 20%; top: 80%; width: 7px; height: 7px; animation-duration: 16s"
        ></div>
        <div
          class="vr-particle purple"
          style="left: 65%; top: 70%; width: 5px; height: 5px; animation-duration: 14s"
        ></div>
      </div>
    </div>

    <div class="tech-connector">
      <div class="connector-line"></div>
    </div>

    <div class="features-container">
      <div class="feature-intro">
        <div class="tech-globe">
          <div class="globe-inner"></div>
        </div>
        <h2 class="section-subtitle vr-neon-text">突破性技术 · 无限可能</h2>
        <p class="intro-text">
          我们的VR游戏采用最前沿技术，打造前所未有的沉浸式体验。
          从物理引擎到AI系统，每一项技术都经过精心设计，确保您获得最真实、最流畅的虚拟现实体验。
        </p>
      </div>

      <div
        v-for="(feature, index) in features"
        :key="feature.id"
        class="feature-item"
        :class="{ reverse: index % 2 !== 0 }"
      >
        <div
          class="feature-image animate__animated"
          :class="index % 2 === 0 ? 'animate__fadeInLeft' : 'animate__fadeInRight'"
          v-intersect
        >
          <div
            class="image-container"
            :ref="
              (el) => {
                if (el) featureCards.push(el)
              }
            "
          >
            <div class="cyber-frame"></div>
            <el-image :src="feature.image" fit="cover" lazy class="tech-image">
              <template #placeholder>
                <div class="image-placeholder">
                  <el-icon><Picture /></el-icon>
                </div>
              </template>
              <template #error>
                <div class="image-placeholder">
                  <el-icon><PictureFilled /></el-icon>
                </div>
              </template>
            </el-image>
            <div class="corner-decor top-left"></div>
            <div class="corner-decor top-right"></div>
            <div class="corner-decor bottom-left"></div>
            <div class="corner-decor bottom-right"></div>
          </div>
        </div>
        <div
          class="feature-content animate__animated"
          :class="index % 2 === 0 ? 'animate__fadeInRight' : 'animate__fadeInLeft'"
          v-intersect
        >
          <div class="feature-header">
            <div class="feature-icon">
              <el-icon><component :is="feature.icon" /></el-icon>
            </div>
            <div class="tech-tag">.tech_{{ index + 1 }}</div>
          </div>
          <h2 class="feature-title">{{ feature.title }}</h2>
          <p class="feature-description">{{ feature.description }}</p>
          <div class="tech-indicators">
            <span class="tech-indicator"></span>
            <span class="tech-indicator"></span>
            <span class="tech-indicator"></span>
          </div>
        </div>
      </div>
    </div>

    <div class="tech-specs">
      <div class="tech-grid-bg"></div>
      <h2
        class="vr-mega-title vr-floating-title animate__animated animate__fadeIn"
        data-text="技术规格"
        v-intersect
      >
        技术<span class="highlight">规格</span>
        <span class="glitch-layer">技术规格</span>
        <span class="glitch-layer">技术规格</span>
      </h2>
      <div class="specs-container">
        <div class="specs-content animate__animated animate__zoomIn">
          <el-table
            :data="[
              { spec: '分辨率', value: '每眼4K (3840 x 2160)', icon: 'Monitor' },
              { spec: '刷新率', value: '120Hz', icon: 'RefreshRight' },
              { spec: '视场角', value: '110度', icon: 'View' },
              { spec: '追踪技术', value: '6DoF（六自由度）', icon: 'Position' },
              { spec: '音频', value: '3D空间音频', icon: 'Headset' },
              { spec: '控制器', value: '双手触摸控制器', icon: 'Operation' },
            ]"
            border
            style="width: 100%"
            class="spec-table"
          >
            <el-table-column label="" width="60">
              <template #default="scope">
                <el-icon size="24" class="spec-icon"><component :is="scope.row.icon" /></el-icon>
              </template>
            </el-table-column>
            <el-table-column prop="spec" label="规格" />
            <el-table-column prop="value" label="数值" />
          </el-table>
        </div>

        <div class="floating-vr-element">
          <img
            src="https://source.unsplash.com/random/600x400/?vr,headset"
            alt="VR Headset"
            class="floating-vr-img"
          />
        </div>
      </div>
    </div>

    <!-- 增加交互体验详细展示 -->
    <div class="interactive-features">
      <div class="container">
        <h2 class="section-title animate__animated animate__fadeIn" v-intersect>
          交互<span class="highlight">体验</span>
        </h2>
        <p
          class="section-description animate__animated animate__fadeIn animation-delay-1"
          v-intersect
        >
          我们的VR技术让您沉浸在游戏世界中，体验前所未有的交互方式
        </p>

        <div class="interactive-grid">
          <div class="interactive-item animate__animated animate__fadeInLeft" v-intersect>
            <div class="interactive-icon">
              <i class="el-icon-data-analysis"></i>
            </div>
            <h3>全身动作捕捉</h3>
            <p>高精度传感器追踪全身动作，将您的每一个动作完美地映射到虚拟世界中</p>
            <div class="interactive-badge">最新技术</div>
          </div>

          <div
            class="interactive-item animate__animated animate__fadeInUp animation-delay-1"
            v-intersect
          >
            <div class="interactive-icon">
              <i class="el-icon-headset"></i>
            </div>
            <h3>3D空间音频</h3>
            <p>身临其境的3D环绕音效，根据您的位置和环境实时动态调整，提供完美的声音定位</p>
            <div class="interactive-badge">沉浸体验</div>
          </div>

          <div
            class="interactive-item animate__animated animate__fadeInRight animation-delay-2"
            v-intersect
          >
            <div class="interactive-icon">
              <i class="el-icon-magic-stick"></i>
            </div>
            <h3>触觉反馈系统</h3>
            <p>精密的触觉反馈技术，让您能够感受到虚拟物体的质感、重量和阻力</p>
            <div class="interactive-badge">真实感受</div>
          </div>

          <div
            class="interactive-item animate__animated animate__fadeInLeft animation-delay-1"
            v-intersect
          >
            <div class="interactive-icon">
              <i class="el-icon-coordinate"></i>
            </div>
            <h3>实时环境扫描</h3>
            <p>先进的环境感知技术，实时扫描您的物理空间，防止碰撞并提供混合现实体验</p>
            <div class="interactive-badge">安全保障</div>
          </div>

          <div
            class="interactive-item animate__animated animate__fadeInUp animation-delay-2"
            v-intersect
          >
            <div class="interactive-icon">
              <i class="el-icon-chat-dot-square"></i>
            </div>
            <h3>多人语音通讯</h3>
            <p>高清晰度低延迟语音系统，支持多达50人同时在线交流，打造真实的社交体验</p>
            <div class="interactive-badge">社交互动</div>
          </div>

          <div
            class="interactive-item animate__animated animate__fadeInRight animation-delay-3"
            v-intersect
          >
            <div class="interactive-icon">
              <i class="el-icon-cpu"></i>
            </div>
            <h3>AI智能交互</h3>
            <p>由最新的人工智能驱动的NPC系统，能够理解您的语音命令并做出智能反应</p>
            <div class="interactive-badge">智能系统</div>
          </div>
        </div>
      </div>
      <div class="interactive-decor"></div>
    </div>

    <!-- 平台兼容性 -->
    <div class="compatibility-section">
      <div class="container">
        <h2 class="section-title animate__animated animate__fadeIn" v-intersect>
          平台<span class="highlight">兼容性</span>
        </h2>
        <p
          class="section-description animate__animated animate__fadeIn animation-delay-1"
          v-intersect
        >
          我们的VR游戏支持各种主流VR平台，确保您随时随地都能享受沉浸式体验
        </p>

        <div class="platforms-grid">
          <div class="platform-card animate__animated animate__bounceIn" v-intersect>
            <div class="platform-name">Oculus</div>
            <div class="platform-logo">Q</div>
            <div class="platform-version">Quest 2 / Quest 3 / Quest Pro</div>
            <div class="platform-status">优化支持</div>
          </div>

          <div
            class="platform-card animate__animated animate__bounceIn animation-delay-1"
            v-intersect
          >
            <div class="platform-name">Valve</div>
            <div class="platform-logo">V</div>
            <div class="platform-version">Index / Steam VR</div>
            <div class="platform-status">完全支持</div>
          </div>

          <div
            class="platform-card animate__animated animate__bounceIn animation-delay-2"
            v-intersect
          >
            <div class="platform-name">HTC</div>
            <div class="platform-logo">H</div>
            <div class="platform-version">Vive Pro / Vive Focus</div>
            <div class="platform-status">完全支持</div>
          </div>

          <div
            class="platform-card animate__animated animate__bounceIn animation-delay-3"
            v-intersect
          >
            <div class="platform-name">Pico</div>
            <div class="platform-logo">P</div>
            <div class="platform-version">Pico 4 / Neo 3</div>
            <div class="platform-status">支持中</div>
          </div>
        </div>
      </div>
      <div class="platform-bubbles">
        <div class="platform-bubble b1"></div>
        <div class="platform-bubble b2"></div>
        <div class="platform-bubble b3"></div>
        <div class="platform-bubble b4"></div>
        <div class="platform-bubble b5"></div>
      </div>
    </div>

    <div class="experience-cta">
      <div class="container">
        <div class="cta-content">
          <h2 class="animate__animated animate__fadeIn" v-intersect>
            体验我们的<span class="highlight">VR科技</span>
          </h2>
          <p class="animate__animated animate__fadeIn animation-delay-1" v-intersect>
            准备好探索未来了吗？下载我们的VR游戏，领略尖端技术带来的沉浸式体验。
          </p>
          <div class="cta-buttons animate__animated animate__fadeIn animation-delay-2" v-intersect>
            <el-button type="primary" class="glow-button" @click="handleTryNow">立即试玩</el-button>
            <el-button type="info" class="tech-button" @click="handleMoreTechDetails"
              >了解更多技术细节</el-button
            >
          </div>
        </div>
        <div class="tech-pulse"></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.features {
  width: 100%;
  background-color: #0a0a1a;
  color: #ffffff;
  overflow: hidden; /* 防止内容溢出 */
}

.features-hero {
  height: 60vh;
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)),
    url('https://source.unsplash.com/random/1920x1080/?virtual,reality') center/cover no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cyber-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(to right, rgba(0, 195, 255, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 195, 255, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  transform: perspective(500px) rotateX(30deg);
  transform-origin: center;
  animation: grid-move 20s linear infinite;
}

@keyframes grid-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 40px;
  }
}

.hero-content {
  text-align: center;
  position: relative;
  z-index: 2;
  padding: 0 20px;
}

.vr-mega-title {
  font-size: 4.5rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 20px;
  letter-spacing: 3px;
  position: relative;
  text-shadow: 0 0 20px rgba(0, 195, 255, 0.7);
}

.cyber-subtitle {
  font-size: 1.5rem;
  margin-bottom: 30px;
  color: #a9c2ff;
  max-width: 800px;
  margin: 0 auto;
}

.highlight {
  color: #00c3ff;
  position: relative;
  text-shadow: 0 0 15px rgba(0, 195, 255, 0.8);
}

.tech-connector {
  height: 80px;
  background-color: #0a0a1a;
  display: flex;
  justify-content: center;
  position: relative;
}

.connector-line {
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 195, 255, 0.8), transparent);
}

.features-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px 80px;
  position: relative;
}

.feature-intro {
  text-align: center;
  margin-bottom: 80px;
  position: relative;
}

.tech-globe {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto 20px;
  position: relative;
  background: radial-gradient(circle at center, rgba(0, 195, 255, 0.3), transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.globe-inner {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #00c3ff, rgba(0, 195, 255, 0.1));
  box-shadow: 0 0 30px rgba(0, 195, 255, 0.8);
  animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.8);
    opacity: 0.8;
  }
}

.section-subtitle {
  font-size: 2rem;
  color: #fff;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.intro-text {
  max-width: 800px;
  margin: 0 auto;
  color: #a9c2ff;
  line-height: 1.8;
  font-size: 1.1rem;
}

.feature-item {
  display: flex;
  align-items: center;
  margin-bottom: 120px;
  position: relative;
}

.feature-item.reverse {
  flex-direction: row-reverse;
}

.feature-image {
  flex: 1;
  padding: 0 20px;
}

.image-container {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.cyber-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(0, 195, 255, 0.3);
  z-index: 2;
  pointer-events: none;
}

.tech-image {
  width: 100%;
  display: block;
  transition: transform 0.8s ease;
}

.image-container:hover .tech-image {
  transform: scale(1.05);
}

.corner-decor {
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: #00c3ff;
  z-index: 3;
}

.top-left {
  top: 0;
  left: 0;
  border-top: 2px solid;
  border-left: 2px solid;
}

.top-right {
  top: 0;
  right: 0;
  border-top: 2px solid;
  border-right: 2px solid;
}

.bottom-left {
  bottom: 0;
  left: 0;
  border-bottom: 2px solid;
  border-left: 2px solid;
}

.bottom-right {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

.feature-content {
  flex: 1;
  padding: 0 30px;
}

.feature-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.feature-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(0, 195, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #00c3ff;
  border: 1px solid rgba(0, 195, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 195, 255, 0.3);
}

.tech-tag {
  font-family: monospace;
  color: #00c3ff;
  font-size: 0.9rem;
  opacity: 0.8;
  letter-spacing: 1px;
}

.feature-title {
  font-size: 2rem;
  color: #fff;
  margin-bottom: 15px;
  font-weight: 600;
  letter-spacing: 1px;
}

.feature-description {
  color: #a9c2ff;
  line-height: 1.8;
  margin-bottom: 20px;
  font-size: 1.1rem;
}

.tech-indicators {
  display: flex;
  gap: 10px;
}

.tech-indicator {
  display: block;
  width: 25px;
  height: 4px;
  background-color: #00c3ff;
  border-radius: 2px;
  opacity: 0.7;
}

.animation-delay-1 {
  animation-delay: 0.3s;
}

.animation-delay-2 {
  animation-delay: 0.6s;
}

.image-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 300px;
  background-color: rgba(0, 195, 255, 0.05);
  color: #00c3ff;
}

.tech-specs {
  background-color: #070715;
  padding: 100px 20px;
  position: relative;
  overflow: hidden;
}

.tech-grid-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at center, rgba(0, 195, 255, 0.15) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.3;
}

.section-title {
  text-align: center;
  margin-bottom: 60px;
  font-size: 2.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  z-index: 2;
}

.specs-container {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.specs-content {
  position: relative;
  z-index: 2;
}

.spec-table {
  background: linear-gradient(145deg, rgba(12, 12, 36, 0.7), rgba(26, 26, 58, 0.7));
  border: 1px solid rgba(0, 195, 255, 0.3);
  border-radius: 10px;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.spec-table :deep(th) {
  background-color: rgba(0, 195, 255, 0.1) !important;
  color: #00c3ff !important;
  border-color: rgba(0, 195, 255, 0.3) !important;
}

.spec-table :deep(td) {
  border-color: rgba(0, 195, 255, 0.2) !important;
  color: #fff;
}

.spec-icon {
  color: #00c3ff;
}

.floating-vr-element {
  position: absolute;
  bottom: -80px;
  right: -100px;
  z-index: 1;
  opacity: 0.6;
}

.floating-vr-img {
  width: 300px;
  animation: float-vr 6s ease-in-out infinite;
}

@keyframes float-vr {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

.experience-cta {
  padding: 100px 0;
  background:
    linear-gradient(rgba(10, 10, 26, 0.9), rgba(7, 7, 21, 0.9)),
    url('https://source.unsplash.com/random/1920x1080/?cyberpunk') center/cover fixed;
  position: relative;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

.cta-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.cta-content h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.cta-content p {
  font-size: 1.2rem;
  color: #a9c2ff;
  margin-bottom: 30px;
  line-height: 1.6;
}

.cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.glow-button {
  background: linear-gradient(45deg, #0088ff, #00c3ff);
  border: none;
  color: white;
  padding: 12px 25px;
  font-weight: bold;
  letter-spacing: 1px;
  box-shadow: 0 0 20px rgba(0, 195, 255, 0.5);
  transition: all 0.3s ease;
}

.glow-button:hover {
  box-shadow: 0 0 30px rgba(0, 195, 255, 0.8);
  transform: translateY(-3px);
}

.tech-button {
  background: transparent;
  border: 1px solid rgba(0, 195, 255, 0.5);
  color: #00c3ff;
  padding: 12px 25px;
  transition: all 0.3s ease;
}

.tech-button:hover {
  background: rgba(0, 195, 255, 0.1);
}

.tech-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  height: 80vw;
  max-width: 1000px;
  max-height: 1000px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 195, 255, 0.1) 0%, transparent 70%);
  animation: pulse-cta 4s infinite ease-in-out;
  z-index: 1;
}

@keyframes pulse-cta {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.5;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .vr-mega-title {
    font-size: 2.5rem;
  }

  .feature-item,
  .feature-item.reverse {
    flex-direction: column;
  }

  .feature-image,
  .feature-content {
    width: 100%;
    padding: 0;
    margin-bottom: 30px;
  }

  .floating-vr-element {
    display: none;
  }

  .cta-buttons {
    flex-direction: column;
    gap: 15px;
  }
}

.interactive-features {
  padding: 100px 0;
  background-color: #0a0a1a;
}

.interactive-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

.interactive-item {
  flex: 1 1 calc(33.33% - 20px);
  text-align: center;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.interactive-item:hover {
  transform: translateY(-5px);
}

.interactive-icon {
  font-size: 48px;
  color: #00c3ff;
  margin-bottom: 10px;
}

.interactive-badge {
  background-color: rgba(0, 195, 255, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  color: #00c3ff;
}

.interactive-decor {
  height: 200px;
  background-color: #0a0a1a;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.compatibility-section {
  padding: 100px 0;
  background-color: #0a0a1a;
}

.platforms-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

.platform-card {
  flex: 1 1 calc(33.33% - 20px);
  text-align: center;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.platform-card:hover {
  transform: translateY(-5px);
}

.platform-name {
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
}

.platform-logo {
  font-size: 2rem;
  font-weight: 800;
  color: #00c3ff;
}

.platform-version {
  font-size: 1rem;
  color: #a9c2ff;
}

.platform-status {
  font-size: 1rem;
  color: #00c3ff;
}

.platform-bubbles {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.platform-bubble {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(0, 195, 255, 0.2);
  margin: 10px;
}
</style>
